<template>
  <div id="one-box">
    <div class="msg-select">
      <h3 class="msg-title">我的消息</h3>
      <el-radio class="radio" v-model="activeMenu" label="@我的">
        <router-link to="/myMessage/mymsg" class="radio-box" active-class="active-radio-box" tag="div">
          <span class="iconfont">&#xe60b;</span>
          <span class="c-w">我的</span>
        </router-link>
      </el-radio>
       <el-radio class="radio" v-model="activeMenu" label="私信">
          <router-link to="/myMessage/privateLetter" class="radio-box" active-class="active-radio-box" tag="div">
            <span class="iconfont">&#xe604;</span>
            <span class="c-w">私信</span>
          </router-link>
      </el-radio>
       <el-radio class="radio" v-model="activeMenu" label="评论">
         <router-link to="/myMessage/comment" class="radio-box" active-class="active-radio-box" tag="div">
            <span class="iconfont">&#xe628;</span>
            <span class="c-w">评论</span>
          </router-link>
      </el-radio>
       <el-radio class="radio" v-model="activeMenu" label="通知">
          <router-link to="/myMessage/inform" class="radio-box" active-class="active-radio-box" tag="div">
            <span class="iconfont">&#xe63e;</span>
            <span class="c-w">通知</span>
          </router-link>
      </el-radio>
    </div>
    <div class="msg-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:"myMessage",
    data() {
      return {
        activeMenu: "@我的",
      }
    },
  }
</script>

<style lang="scss" scoped>
#one-box{
  display: flex;
  padding:0;
  .msg-content{
    flex:1;
    padding:40px;
  }
  .msg-select{
    background-color: rgb(252,252,252);
    min-height: 700px;
    width:200px;
    box-sizing: border-box;
    border-right:1px solid rgb(221,221,221);
    .msg-title{
      font-size: 20px;
      padding-bottom:10px;
      color:rgb(51,51,51);
      // text-align: center;
      text-indent: 2em;
      margin-top:30px;
      border-bottom:1px solid rgb(221,221,221);
    }
  }
}
.radio{
  
  margin-right:0;
  height:54px;
  display: block;
  line-height:54px;
  border-bottom:1px solid rgb(221,221,221);
  ::v-deep .el-radio__input{
    display: none;
  }
  ::v-deep .el-radio__label{
    padding-left:0;
  }
  .radio-box{
    text-align: center;
    background-color: rgb(247,247,247);
    height:100%;
    box-sizing: border-box;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont{
      margin-right: 6px;
      font-size:22px;
      color:rgb(102,102,102);
    }
  }
}
.el-radio.radio.is-checked{
  .active-radio-box{
  }
}
.active-radio-box{
    background-color: #fff!important;
    transform: translateX(1px);

}
.c-w{
  color:rgb(96,98,102);
}
</style>